import { useState } from 'react';
import { Mail, MessageSquare, Clock } from 'lucide-react';
import Button from '../components/Button';
import FAQItem from '../components/FAQItem';
import { useLanguage } from '../contexts/LanguageContext';

const Support = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');
  const { t, language } = useLanguage();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Support form submitted:', {
      name,
      email,
      subject,
      message
    });
    alert(language === 'zh-CN' ? '感谢您的反馈！我们会尽快回复您。' : 'Thank you for your feedback! We will get back to you soon.');
    setName('');
    setEmail('');
    setSubject('');
    setMessage('');
  };

  return (
    <div className="w-full">
      {/* Support Header */}
      <section className="bg-[#0f1c3f] dark:bg-gray-800 text-white py-16 transition-colors duration-300">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-3xl md:text-4xl font-bold mb-4">
            {t('support.title')}
          </h1>
          <p className="text-xl text-gray-300 dark:text-gray-200 max-w-2xl mx-auto">
            {t('support.subtitle')}
          </p>
        </div>
      </section>
      {/* Contact Methods */}
      <section className="py-12 bg-white dark:bg-gray-900 transition-colors duration-300">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
            <div className="text-center p-6 bg-gray-50 dark:bg-gray-800 rounded-xl transition-colors duration-300">
              <div className="w-16 h-16 bg-[#0f1c3f] dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
                <Mail className="text-[#00d4ff]" size={28} />
              </div>
              <h3 className="text-lg font-bold text-[#0f1c3f] dark:text-white mb-2">
                {language === 'zh-CN' ? '邮件支持' : 'Email Support'}
              </h3>
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                {language === 'zh-CN' ? '发送邮件至我们的支持团队' : 'Send email to our support team'}
              </p>
              <a href="mailto:support@kernelproxy.com" className="text-[#00d4ff] hover:underline">
                support@kernelproxy.com
              </a>
            </div>

            <div className="text-center p-6 bg-gray-50 dark:bg-gray-800 rounded-xl transition-colors duration-300">
              <div className="w-16 h-16 bg-[#0f1c3f] dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
                <MessageSquare className="text-[#00d4ff]" size={28} />
              </div>
              <h3 className="text-lg font-bold text-[#0f1c3f] dark:text-white mb-2">
                {language === 'zh-CN' ? '在线客服' : 'Live Chat'}
              </h3>
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                {language === 'zh-CN' ? '与我们的支持团队实时聊天' : 'Chat with our support team in real-time'}
              </p>
              <button className="text-[#00d4ff] hover:underline">
                {language === 'zh-CN' ? '开始聊天' : 'Start Chat'}
              </button>
            </div>

            <div className="text-center p-6 bg-gray-50 dark:bg-gray-800 rounded-xl transition-colors duration-300">
              <div className="w-16 h-16 bg-[#0f1c3f] dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
                <Clock className="text-[#00d4ff]" size={28} />
              </div>
              <h3 className="text-lg font-bold text-[#0f1c3f] dark:text-white mb-2">
                {language === 'zh-CN' ? '工作时间' : 'Working Hours'}
              </h3>
              <p className="text-gray-600 dark:text-gray-300 mb-2">
                {language === 'zh-CN' ? '周一至周五: 9:00 - 18:00' : 'Mon - Fri: 9:00 AM - 6:00 PM'}
              </p>
              <p className="text-gray-600 dark:text-gray-300">
                {language === 'zh-CN' ? '周末及节假日: 10:00 - 17:00' : 'Weekends & Holidays: 10:00 AM - 5:00 PM'}
              </p>
            </div>
          </div>

          {/* Contact Form */}
          <div className="max-w-3xl mx-auto bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-8 transition-colors duration-300">
            <h2 className="text-2xl font-bold text-[#0f1c3f] dark:text-white mb-6">
              {t('support.contact.title')}
            </h2>
            <form onSubmit={handleSubmit}>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                  <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    {t('support.contact.name')}
                  </label>
                  <input 
                    type="text" 
                    id="name" 
                    value={name} 
                    onChange={e => setName(e.target.value)} 
                    className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-[#00d4ff] transition-colors duration-300" 
                    required 
                  />
                </div>
                <div>
                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    {t('support.contact.email')}
                  </label>
                  <input 
                    type="email" 
                    id="email" 
                    value={email} 
                    onChange={e => setEmail(e.target.value)} 
                    className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-[#00d4ff] transition-colors duration-300" 
                    required 
                  />
                </div>
              </div>

              <div className="mb-6">
                <label htmlFor="subject" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  {t('support.contact.subject')}
                </label>
                <input 
                  type="text" 
                  id="subject" 
                  value={subject} 
                  onChange={e => setSubject(e.target.value)} 
                  className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-[#00d4ff] transition-colors duration-300" 
                  required 
                />
              </div>

              <div className="mb-6">
                <label htmlFor="message" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                  {t('support.contact.message')}
                </label>
                <textarea 
                  id="message" 
                  rows={6} 
                  value={message} 
                  onChange={e => setMessage(e.target.value)} 
                  className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-[#00d4ff] transition-colors duration-300" 
                  required
                />
              </div>

              <div className="flex justify-end">
                <Button type="submit" variant="gradient" size="lg">
                  {t('support.contact.send')}
                </Button>
              </div>
            </form>
          </div>
        </div>
      </section>
      {/* FAQ Section */}
      <section className="py-16 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold text-center text-[#0f1c3f] dark:text-white mb-12">
            {t('support.faq.title')}
          </h2>
          <div className="max-w-3xl mx-auto space-y-4">
            <FAQItem
              question={language === 'zh-CN' ? '如何开始使用 kernelProxy？' : 'How do I get started with kernelProxy?'}
              answer={language === 'zh-CN' 
                ? '注册账户后，您可以在控制面板中获取 API 密钥，然后按照文档中的说明集成到您的应用中。'
                : 'After registering an account, you can get your API key in the control panel and integrate it into your application following the instructions in the documentation.'}
              defaultOpen={true}
            />
            <FAQItem
              question={language === 'zh-CN' ? '支持哪些编程语言？' : 'Which programming languages are supported?'}
              answer={language === 'zh-CN'
                ? '我们提供了 JavaScript、Python 和 Java 的 SDK，同时您也可以使用 REST API 与任何支持 HTTP 请求的语言进行集成。'
                : 'We provide SDKs for JavaScript, Python, and Java. You can also use the REST API to integrate with any language that supports HTTP requests.'}
            />
            <FAQItem
              question={language === 'zh-CN' ? '如何获取技术支持？' : 'How can I get technical support?'}
              answer={language === 'zh-CN'
                ? '您可以通过邮件、在线客服或提交工单的方式获取技术支持。我们的支持团队会在 24 小时内回复您的问题。'
                : 'You can get technical support through email, live chat, or by submitting a ticket. Our support team will respond to your inquiry within 24 hours.'}
            />
          </div>
        </div>
      </section>
    </div>
  );
};

export default Support;